<template>
  <div class="v-identity">
    <div>
      <div class="title">{{ $t('message.emergencyContact') }}{{ num }}</div>
      <!--姓名-->
      <div class="label">{{ $t('message.personalIdentityName') }}:</div>
      <div class="input-group">
        <!--请填写姓名-->
        <input type="text" v-model="data.firstName" class="input input-short" :placeholder="this.$t('message.pleaseFillName')" />
        <!--请填写姓氏-->
        <input type="text" v-model="data.lastName" class="input input-short" :placeholder="this.$t('message.pleaseFillSurname')" />
      </div>
      <div class="error-tips" v-if="firstNameError">
        <!--请输入正确的名字-->
        {{$t('message.inputCorrectFirstName')}}
      </div>
      <div class="error-tips" v-if="lastNameError">
        <!--请输入正确的姓氏-->
        {{$t('message.inputCorrectLastName')}}
      </div>
      <!--年龄-->
      <div class="label">{{ $t('message.age') }}:</div>
      <!--请填写年龄-->
      <input type="text" v-model="data.age" class="input input-long" :placeholder="this.$t('message.pleaseFillAge')" maxlength="3" />
      <div class="error-tips" v-if="ageError">
        {{$t('message.ageError')}}
      </div>
      <!--关系-->
      <div class="label">{{ $t('message.relation') }}:</div>
      <!--请填写关系，如父亲-->
      <input type="text" v-model="data.relation" class="input input-long" :placeholder="this.$t('message.pleaseFillRelation')" maxlength="50" />
      <div class="error-tips" v-if="relationError">
        {{$t('message.relationError')}}
      </div>
      <!--电话号码-->
      <div class="label">{{ $t('message.phoneNum') }}:</div>
      <!--请填写电话号码-->
      <input type="text" v-model.trim="data.phoneNum" class="input input-long" :placeholder="this.$t('message.pleaseFillPhoneNum')" />
      <div class="error-tips" v-if="phoneNumError">
        {{$t('message.phoneNumError')}}
      </div>
      <div class="error-tips" v-if="phoneNumSameError">
        {{$t('message.phoneNumSameError')}}
      </div>
      <!--职业-->
      <div class="label">{{ $t('message.job') }}:</div>
      <!--请填写职业-->
      <input type="text" v-model="data.job" class="input input-long" :placeholder="this.$t('message.pleaseFillJob')" maxlength="50" />
      <div class="error-tips" v-if="jobError">
        {{$t('message.jobError')}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VEmergency',
  props: {
    num: String,
    parentData: {
      type: Object,
      default () {
        return {
          firstName: '',
          lastName: '',
          age: '',
          relation: '',
          phoneNum: '',
          job: ''
        }
      }
    }
  },
  data () {
    return {
      data: {
        firstName: this.parentData.firstName || '',
        lastName: this.parentData.lastName || '',
        age: this.parentData.age || '',
        relation: this.parentData.relation || '',
        phoneNum: this.parentData.phoneNum || '',
        job: this.parentData.job || ''
      },
      firstNameError: false,
      lastNameError: false,
      firstNameStatus: 0,
      lastNameStatus: 0,
      ageError: false,
      ageStatus: 0,
      relationError: false,
      relationStatus: 0,
      phoneNumError: false,
      phoneNumStatus: 0,
      phoneNumSameStatus: 0,
      phoneNumSameError: false,
      jobError: false,
      jobStatus: 0
    }
  },
  computed: {
    isHandParent () {
      if (this.firstNameStatus === 1 && this.lastNameStatus === 1 && this.ageStatus === 1 && this.relationStatus === 1 && this.phoneNumStatus === 1 && this.jobStatus === 1 && this.phoneNumSameStatus === 1) {
        return 'ok'
      } else {
        return 'no'
      }
    }
  },
  watch: {
    isHandParent (val) {
      if (val === 'ok') {
        this.$emit('change-params', this.data)
      } else if (val === 'no') {
        this.$emit('change-params', 'no')
      }
    },
    'data.firstName' (val) {
      clearTimeout(this.firstNameTimer)
      this.firstNameTimer = setTimeout(() => {
        if (/(^\s*$)|(^0+$)/g.test(val)) {
          this.firstNameStatus = 2
          this.firstNameError = true
        } else {
          this.firstNameStatus = 1
          this.firstNameError = false
        }
      }, 900)
    },
    'data.lastName' (val) {
      clearTimeout(this.lastNameTimer)
      this.lastNameTimer = setTimeout(() => {
        if (/(^\s*$)|(^0+$)/g.test(val)) {
          this.lastNameStatus = 2
          this.lastNameError = true
        } else {
          this.lastNameStatus = 1
          this.lastNameError = false
        }
      }, 900)
    },
    'data.age' (val) {
      clearTimeout(this.ageTimer)
      this.ageTimer = setTimeout(() => {
        if (/(^[1-9]$)|(^[1-9]\d{1,2}$)/g.test(val)) {
          this.ageStatus = 1
          this.ageError = false
        } else {
          this.ageStatus = 2
          this.ageError = true
        }
      }, 900)
    },
    'data.relation' (val) {
      clearTimeout(this.relationTimer)
      this.relationTimer = setTimeout(() => {
        if (/(^\s*$)|(^0+$)/g.test(val)) {
          this.relationStatus = 2
          this.relationError = true
        } else {
          this.relationStatus = 1
          this.relationError = false
        }
      }, 900)
    },
    'data.phoneNum' (val) {
      clearTimeout(this.phoneNumTimer)
      this.phoneNumTimer = setTimeout(() => {
        this.$emit('father-touch', this.num)
        if (/^[0][689]\d{8}$/g.test(val)) {
          this.phoneNumStatus = 1
          this.phoneNumError = false
          if (parseInt(this.num) === 1) {
            this.$store.commit('updateRegisterPhoneNum1', val)
            if (parseInt(val) !== parseInt(this.$store.state.registerPhone2)) {
              this.phoneNumSameStatus = 1
              this.phoneNumSameError = false
            } else {
              this.phoneNumSameStatus = 2
              this.phoneNumSameError = true
            }
          }
          if (parseInt(this.num) === 2) {
            this.$store.commit('updateRegisterPhoneNum2', val)
            if (parseInt(val) !== parseInt(this.$store.state.registerPhone1)) {
              this.phoneNumSameStatus = 1
              this.phoneNumSameError = false
            } else {
              this.phoneNumSameStatus = 2
              this.phoneNumSameError = true
            }
          }
        } else {
          if (parseInt(this.num) === 1) {
            this.$store.commit('updateRegisterPhoneNum1', val)
          } else {
            this.$store.commit('updateRegisterPhoneNum2', val)
          }
          this.phoneNumStatus = 2
          this.phoneNumError = true
          this.phoneNumSameStatus = 1
          this.phoneNumSameError = false
        }
      }, 900)
    },
    'data.job' (val) {
      clearTimeout(this.jobTimer)
      this.jobTimer = setTimeout(() => {
        if (/(^\s*$)|(^0+$)/g.test(val)) {
          this.jobStatus = 2
          this.jobError = true
        } else {
          this.jobStatus = 1
          this.jobError = false
        }
      }, 900)
    },
    parentData (newVal) {
      this.data = newVal
    }
  },
  methods: {
    changeData () {
      this.phoneNumSameStatus = 1
      this.phoneNumSameError = false
    }
  }
}
</script>

<style scoped>
.title {
  line-height: 22px;
  font-size: 16px;
  font-weight: bold;
  padding-left: 18px;
  padding-bottom: 16px;
  position: relative;
}

.title:before {
  content: '';
  display: block;
  width: 4px;
  height: 15px;
  background-color: #ff600a;
  position: absolute;
  top: 4px;
  left: 0;
}

.label {
  line-height: 20px;
  margin-top: 24px;
}

.input-group {
  /*font-size: 0;*/
}

.input {
  height: 48px;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 0 15px;
}

.input-short {
  width: 288px;
  margin-right: 24px;
}

.input-short:last-child {
  margin-right: 0;
}

.choose-group {
  height: 48px;
  margin-top: 12px;
  overflow: hidden;
}

.choose {
  float: left;
  width: 158px;
  height: 46px;
  line-height: 46px;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  text-align: center;
  color: #a5a5a5;
  margin-right: 24px;
  cursor: pointer;
}

.choose:last-child {
  margin-right: 0;
}

.chooseActive {
  color: #333;
  border: 1px solid #ff600a;
  background: url(../../assets/images/icon_check.png) no-repeat right top;
}

.input-long {
  width: 600px;
}

.upload {
  margin-top: 60px;
}
</style>
